<template>
  <div class="cate2">
    <h2>slot</h2>
    <div class="container">
      <!-- 数据在子组件,但数据生成的结构,由父组件决定 -->
      <Game>
        <template v-slot:qwe="params">
          {{ params }}
          <ul>
            <li v-for="(item, index) in params.youxi" :key=index>
              {{ item.title }}
            </li>
          </ul>
        </template>
      </Game>

      <Game>
        <template #default="params">
          <ol>
          <li v-for="(item, index) in params.youxi" :key=index>
            {{ item.title }}
          </li>
        </ol>
      </template>
        
      </Game>

      <Game>
        <!-- 可以直接解构游戏 -->
        <template v-slot:qwe="{youxi}">
          <h3 v-for="(item, index) in youxi" :key=index>{{ item.title }}</h3>
      </template>
        
      </Game>
    </div>
  </div>
</template>

<script lang="ts" setup name="father">
import Game from './Game.vue'
</script>

<style scoped>
  .cate2 {
    background: grey;
  }
  .container {
    display: flex;
    justify-content: space-around;
  }
  h2 {
    background: orange;
    text-align: center;
  }
</style>